<template>
  <div class="detail">
    <nav-bar
      class="nav-bar"
      :class="[scrollTop > 300 ? 'scorll-nav-bar' : 'default-nav-bar ']"
      right-width="90px"
      is-back
    >
      <i class="iconfont icon-fanhui" slot="left"></i>
      <div slot="center" class="center" v-show="scrollTop > 300">
        <span @click="changeScrollTop()">
          <span :class="{ active: scrollTop < 724 }">商品</span>
        </span>
        <span @click="changeScrollTop(724)">
          <span :class="{ active: scrollTop >= 724 }">详情</span>
        </span>
        <span>
          <span>推荐</span>
        </span>
      </div>
      <div slot="right">
        <i class="iconfont icon-zhuanfa" style="margin-right: 10px"></i>
        <i class="iconfont icon-gengduo"></i>
      </div>
    </nav-bar>
    <van-swipe @change="onChange" class="swipe">
      <van-swipe-item v-for="item in banners" :key="item">
        <img v-lazy="item" class="image" width="100%" height="400px" />
      </van-swipe-item>

      <template #indicator>
        <div class="custom-indicator">
          {{ current + 1 }}/{{ banners.length }}
        </div>
      </template>
    </van-swipe>
    <div class="detail-body" v-if="loading">
      <div class="panel">
        <div class="panel-header">
          <div class="price">
            ￥<span class="bigPrice">{{
              detail.itemInfo.highPrice | filterPrice(0)
            }}</span>
            <span class="smallPrice">{{
              detail.itemInfo.highPrice | filterPrice(1)
            }}</span>
          </div>
          <div style="text-align: center">
            <i class="iconfont icon-shoucang1"></i>
            <div style="font-size: 8px">收藏</div>
          </div>
        </div>
        <div class="panel-body">{{ detail.itemInfo.desc }}</div>
        <div class="panel-footer">
          <van-tag
            type="primary"
            class="tag"
            color="#def6f5"
            text-color="#00bfc0"
            >免税</van-tag
          >
          <van-tag
            type="primary"
            class="tag"
            color="#def6f5"
            text-color="#00bfc0"
            >包邮</van-tag
          >
        </div>
      </div>
      <service :service="detail.shopInfo.services"></service>
      <shop :shop="detail.shopInfo"></shop>
      <detail-info
        :detail-info="detail.detailInfo.detailImage"
        ref="detail-info"
      ></detail-info>
      <van-goods-action>
        <van-goods-action-icon icon="service-o" text="客服" dot />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="total"
          @click="$router.push('/cart')"
        />
        <van-goods-action-button
          color="#090c19"
          text="加入购物车"
          @click="show = !show"
        />
        <van-goods-action-button
          color="#00bfc0"
          text="立即购买"
          @click="show = !show"
        />
      </van-goods-action>
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
      >
        <template #sku-actions="props">
          <div class="van-sku-actions">
            <van-button
              square
              size="large"
              color="#090c19"
              @click="props.skuEventBus.$emit('sku:addCart')"
            >
              加入购物车
            </van-button>
            <van-button
              square
              size="large"
              color="#00bfc0"
              @click="props.skuEventBus.$emit('sku:buy')"
            >
              立即购买
            </van-button>
          </div>
        </template>
      </van-sku>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { queryGoodsDetail, saveCart, queryCart } from '@/api'
import { toast } from '@/utils'
import NavBar from '../../components/nav-bar/nav-bar.vue'
import Service from '../../components/service/service.vue'
import Shop from '../../components/shop/shop.vue'
import DetailInfo from '../../components/detail-info/detail-info.vue'
export default {
  name: 'detail',
  data() {
    return {
      total: 0, // 购物车数量
      goodsId: 0, // 商品id
      detail: {}, // 详情数据
      banners: [], // 轮播
      current: 0, // 轮播下当前数字
      loading: false, // 数据在请求完毕再加载DOM
      scrollTop: 0, // 滚动高度
      show: false, // 显示sku
      sku: {
        // sku信息
        tree: [],
        price: '', // 默认价格（单位元）、
        stock_num: 227 // 商品总库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: ''
      }
    }
  },
  components: { NavBar, Service, Shop, DetailInfo },
  computed: {
    ...mapState({ uid: (state) => state.userInfo.id })
  },
  mounted() {
    const { iid, id } = this.$route.params
    this.goodsId = id
    this.queryGoodsDetail(iid)
    this.queryCart(this.uid)
    this.scroll()
  },
  methods: {
    // 查询购物车数量
    async queryCart(uid) {
      const { data } = await queryCart({ uid })
      console.log('打印' + data)
      this.total = data[1]
    },
    // 查询商品详情
    async queryGoodsDetail(iid) {
      const { data } = await queryGoodsDetail(iid)
      console.log(data)
       this.detail = data
      this.banners = data.itemInfo.topImages
     
      
      // 设置商品缩略图
      this.goods.picture = this.banners[0]
      // 设置商品价格
      this.sku.price = this.detail.itemInfo.highPrice
      this.loading = true
    },
    // 滚动轮播图，切换下方数字
    onChange(index) {
      this.current = index
    },
    // 监听页面滚动
    scroll() {
      window.addEventListener('scroll', () => {
        this.scrollTop =
          document.documentElement.scrollTop || window.pageYOffset
      })
    },
    // 切换商品、详情
    changeScrollTop(scrollTop) {
      document.documentElement.scrollTop = scrollTop
    },
    // 点击购买按钮
    onBuyClicked({ goodsId, selectedNum }) {
      this.$router.push({
        path: '/order-detail',
        query: {
          info: JSON.stringify([{ gid: goodsId, num: selectedNum }])
        }
      })
    },
    // 点击添加按钮
    async onAddCartClicked(data) {
      const { goodsId: gid, selectedNum: num } = data
      const result = await saveCart({ gid, num, uid: this.uid })
      if (result?.data) {
        toast.success(result.data)
        this.show = false
        this.queryCart(this.uid)
      }
    }
  },
  filters: {
    filterPrice(value, index) {
      const price = value.split('.')
      return index === 0 ? price[index] : '.' + price[index]
    }
  }
}
</script>

<style scoped lang="less">
.detail {
  min-height: 100vh;
  background: #f7f7f7;
  position: relative;
  z-index: 1;
  .nav-bar {
    position: fixed;
  }
  .default-nav-bar .iconfont {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: rgba(92, 66, 66, 0.2);
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    color: white;
    font-size: 5px;
  }
  .scorll-nav-bar {
    background: var(--theme-color);
    .center {
      display: flex;
      span {
        flex: 1;
        color: white;
        font-size: 12px;
        padding: 2px 0;
        span {
          opacity: 0.5;
        }
      }
      .active {
        opacity: 1;
        border-bottom: 2px solid white;
      }
    }
    .iconfont {
      color: white;
    }
  }
  .swipe {
    .image {
      width: 100%;
      height: 300px;
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.2);
      color: white;
    }
  }
  .detail-body {
    padding: 10px;
    .panel {
      padding: 15px;
      background: #ffffff;
      border-radius: 10px;
      .panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .price {
          color: var(--theme-color);
          .bigPrice {
            font-size: 22px;
            font-weight: 700;
          }
        }
      }
      .panel-body {
        margin: 5px 0;
        font-family: '微软雅黑';
        font-size: 14px;
        color: #090c19;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .panel-footer .tag {
        margin-right: 10px;
      }
    }
  }
}
</style>
